<template>
  <div>
    <AppHeader></AppHeader>

    <PageContainer class="mb-8">
      <div class="back">
        <a class="text-brand flex items-center cursor-pointer"
          ><img
            src="~@/assets/arrow-left-o.png"
            class="mr-2"
            alt=""
          />朱子文化详情</a
        >
      </div>
    </PageContainer>

    <PageContainer class="flex mb-[100px]">
      <main class="flex-1">
        <section class="mb-6">
          <div class="hd mb-3 text-brand">图书详情</div>
          <div class="bd p-5 bg-white rounded overflow-hidden flex">
            <div class="thumb w-[170px] mr-8">
              <div
                class="book-cover"
                style="background-image: url(https://placeimg.com/300/200/tech)"
              ></div>
            </div>
            <div class="content flex-auto">
              <div class="hd mb-4 -mt-1">
                <span class="tag mr-1 text-brand text-sm">[图书]</span>
                <span class="tit font-bold"
                  >Lorem ipsum dolor sit amet, consectetur.</span
                >
              </div>
              <dl class="meta">
                <div>
                  <dt>责任者：</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                </div>
                <div>
                  <dt>创作时间：</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                </div>
                <div>
                  <dt>创作地点：</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                </div>
                <div>
                  <dt>内容：</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                </div>
                <div>
                  <dt>责任者：</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                </div>
                <div>
                  <dt>创作时间：</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                </div>
                <div>
                  <dt>创作地点：</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                </div>
                <div>
                  <dt>内容：</dt>
                  <dd>Lorem ipsum dolor sit amet.</dd>
                </div>
              </dl>
            </div>
          </div>
        </section>

        <section class="mb-6">
          <div class="hd mb-3 text-brand">图书预览</div>
          <div class="bd p-5 bg-white rounded overflow-hidden">
            <fieldset class="grid grid-cols-6 gap-x-[20px] gap-y-[20px]">
              <template v-for="i in 11">
                <figure :key="i" class="">
                  <img
                    class=""
                    src="https://placeimg.com/300/200/tech"
                    alt=""
                  />
                  <figcaption class="text-xs text-center mt-3 text-[#777]">
                    图书页
                  </figcaption>
                </figure>
              </template>
            </fieldset>
          </div>
        </section>

        <section class="mb-6">
          <div class="hd mb-3 text-brand">图书相关</div>
          <div class="bd bg-white rounded overflow-hidden">
            <div
              class="tabs flex items-center text-sm"
              style="background: rgba(177, 149, 114, 0.3)"
            >
              <div class="tab active">人物</div>
              <div class="tab">机构</div>
              <div class="tab">地理</div>
              <div class="tab">事件</div>
            </div>

            <div class="tab-content">
              <div v-for="i in 3" :key="i" class="group">
                <div class="item p-5 bg-white rounded overflow-hidden flex">
                  <div class="thumb w-[170px] mr-8" v-if="i === 1">
                    <div
                      class="book-cover"
                      style="
                        background-image: url(https://placeimg.com/300/200/tech);
                      "
                    ></div>
                  </div>
                  <a class="content flex-auto cursor-pointer">
                    <div class="hd mb-4 -mt-1">
                      <span class="tag mr-1 text-brand text-sm">[图书]</span>
                      <span class="tit"
                        >Lorem ipsum dolor sit amet, consectetur.</span
                      >
                    </div>
                    <dl class="meta">
                      <div>
                        <dt>责任者：</dt>
                        <dd>Lorem ipsum dolor sit amet.</dd>
                      </div>
                      <div>
                        <dt>创作时间：</dt>
                        <dd>Lorem ipsum dolor sit amet.</dd>
                      </div>
                      <div>
                        <dt>创作地点：</dt>
                        <dd>Lorem ipsum dolor sit amet.</dd>
                      </div>
                      <div>
                        <dt>内容：</dt>
                        <dd>Lorem ipsum dolor sit amet.</dd>
                      </div>
                    </dl>
                  </a>
                </div>
                <div class="line border-t group-last:hidden"></div>
              </div>

              <div
                class="more flex items-center justify-center py-4 text-brand text-sm cursor-pointer select-none"
              >
                展开全部
                <img class="w-[12px] ml-2" src="~@/assets/more.png" alt="" />
              </div>
            </div>
          </div>
        </section>

        <section class="mb-6">
          <div class="hd mb-3 text-brand">相关图表</div>
          <div class="bd bg-white rounded overflow-hidden">
            <div v-for="i in 2" :key="i" class="group">
              <div class="item p-5 bg-white rounded overflow-hidden flex">
                <a class="content flex-auto cursor-pointer">
                  <div class="hd mb-4 -mt-1">
                    <span class="tag mr-1 text-brand text-sm">[图书]</span>
                    <span class="tit"
                      >Lorem ipsum dolor sit amet, consectetur.</span
                    >
                  </div>
                  <dl class="meta">
                    <div>
                      <dt>责任者：</dt>
                      <dd>Lorem ipsum dolor sit amet.</dd>
                    </div>
                    <div>
                      <dt>创作时间：</dt>
                      <dd>Lorem ipsum dolor sit amet.</dd>
                    </div>
                    <div>
                      <dt>创作地点：</dt>
                      <dd>Lorem ipsum dolor sit amet.</dd>
                    </div>
                    <div>
                      <dt>内容：</dt>
                      <dd>Lorem ipsum dolor sit amet.</dd>
                    </div>
                  </dl>
                </a>
              </div>
              <div class="line border-t group-last:hidden"></div>
            </div>
          </div>
        </section>
      </main>

      <aside class="flex-[0_0_240px] ml-[30px]">
        <div class="hd text-brand flex items-baseline mb-3">
          <div class="tit">相关文献</div>
          <a class="link text-[#666] text-xs ml-auto cursor-pointer"
            >查看全部</a
          >
        </div>
        <div class="bd p-5 bg-white rounded overflow-hidden">
          <ol>
            <li
              v-for="i in 13"
              :key="i"
              class="py-3 first:pt-0 last:pb-0 border-b last:border-0"
            >
              <a class="cursor-pointer line-clamp-2 text-sm">
                {{ i }}.文献 Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Assumenda, possimus?
              </a>
            </li>
          </ol>
        </div>
      </aside>
    </PageContainer>
  </div>
</template>

<style scoped lang="less">
.tabs {
  padding: 20px 30px;
  .tab {
    position: relative;
    margin-right: 60px;
    padding: 0 4px;

    &::after {
      display: none;
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateY(5px);
      width: 100%;
      height: 2px;
      background-color: #8a6e49;
    }

    &.active {
      &::after {
        display: block;
      }
    }
  }
}
</style>
